<template>
    <div v-if="toolbar.length" class="h-100% flex justify-start items-center">
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 是否全屏
            fullscreen: false,
            // 工具栏
            toolbar: [
                {
                    title: '全屏缩放',
                    name: 'zoom',
                    icon: 'ExpandOutlined',
                    hanlder: () => {
                        const element = document.documentElement
                        // 如果是全屏状态
                        if (this.fullscreen) {
                            // 如果浏览器有这个Function
                            if (document.exitFullscreen) {
                                document.exitFullscreen()
                            } else if (document.webkitCancelFullScreen) {
                                document.webkitCancelFullScreen()
                            } else if (document.mozCancelFullScreen) {
                                document.mozCancelFullScreen()
                            } else if (document.msExitFullscreen) {
                                document.msExitFullscreen()
                            }
                        } else {
                            // 如果浏览器有这个Function
                            if (element.requestFullscreen) {
                                element.requestFullscreen()
                            } else if (element.webkitRequestFullScreen) {
                                element.webkitRequestFullScreen()
                            } else if (element.mozRequestFullScreen) {
                                element.mozRequestFullScreen()
                            } else if (element.msRequestFullscreen) {
                                element.msRequestFullscreen()
                            }
                        }
                        // 判断全屏状态的变量
                        this.fullscreen = !this.fullscreen
                    },
                },
            ]
        }
    },
    mounted() {
        this.initify()
    },
    methods: {
        initify() {
            const _this = this
        }
    },
}
</script>

<style lang="scss" scoped>
.item-container {
    height: 100%;
    padding: 0 0.8rem;
    display: flex;
    align-items: center;
    user-select: none;
    cursor: pointer;
}

.item-container:hover {
    background: #d5d5d5;
}
</style>